<template>
  <div class="content-course">
      <van-swipe class="my-course" :autoplay='2000' indicator-color="white">
          <van-swipe-item :key="item.id" v-for="item in activeAdList">
              <img :src="item.img">
          </van-swipe-item>
      </van-swipe>
      <list-course :call-back='callBack'></list-course>
  </div>
</template>

<script>
import { getAdList, getCourseList } from '@/services/course'
import listCourse from '@/components/list'

export default {
  name: 'contentHeader',
  data () {
    return {
      adList: []
    }
  },
  created () {
    this.getAd()
  },
  methods: {
    async getAd () {
      const { data } = await getAdList({
        spaceKeys: '999'
      })
      if (data.state === 1) {
        this.adList = data.content[0].adDTOList
      }
    },
    async callBack (option) {
      return getCourseList(option)
    }
  },
  computed: {
    activeAdList () {
      return this.adList.filter(item => item.status === 1)
    }
  },
  components: {
    listCourse
  }
}
</script>

<style lang="scss" scoped>
.van-swipe-item {
    display: flex;
    justify-content: center;
    overflow: hidden;
}
img {
    height: 170px;
}
.list-course {
  top: 220px;
  bottom: 50px;
}
</style>
